import 'package:flutter/material.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));

var orange = Color(0xFFfc9f6a);
var pink = Color(0xFFee528c);
var blue = Color(0xFF8bccd6);
var darkBlue = Color(0xFF60a0d7);
var valueBlue = Color(0xFF5fa0d6);

class HomePage extends StatefulWidget {
  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  build(context) => Scaffold(
          body: Container(
        color: Color(0xFFf7f8fc),
        child: ListView(
          shrinkWrap: true,
          physics: BouncingScrollPhysics(),
          children: [
            SizedBox(
              height: 32.0,
            ),
            Padding(
              padding: EdgeInsets.all(10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '声明',
                    style:
                        TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
                  ),
                  Column(
                    children: [
                      Text(
                        '当前余额',
                        style: TextStyle(fontSize: 14.0, color: Colors.grey),
                      ),
                      SizedBox(
                        height: 12.0,
                      ),
                      Text(
                        '\$4373.23',
                        style: TextStyle(
                            fontSize: 22.0, fontWeight: FontWeight.w500),
                      ),
                    ],
                  )
                ],
              ),
            ),
            ItemCard('储蓄卡', '最近6月', '\$ 3284.00', [orange, pink]),
            SizedBox(
              height: 8.0,
            ),
            ItemCard('银行', '最近6月', '\$ 3284.00', [blue, darkBlue]),
            SizedBox(
              height: 32.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 12.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '交易明细',
                    style: TextStyle(
                        fontWeight: FontWeight.w500,
                        color: Colors.black.withOpacity(0.6),
                        fontSize: 18.0),
                  ),
                  Text(
                    '查看全部',
                    style: TextStyle(
                        color: Colors.blue, fontWeight: FontWeight.w500),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 4.0,
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 8.0),
              child: Card(
                child: ListView.builder(
                  shrinkWrap: true,
                  controller: ScrollController(),
                  padding: EdgeInsets.all(4.0),
                  itemCount: 90,
                  itemBuilder: (BuildContext context, int index) => ValueCard(
                        '美国银行',
                        '\$ 3284.00',
                        '12-03-2019',
                        '城市银行',
                      ),
                ),
              ),
            )
          ],
        ),
      ));
}

class ValueCard extends StatelessWidget {
  ValueCard(this.name, this.value, this.date, this.bank);
  final name;
  final value;
  final date;
  final bank;
  @override
  build(context) => Container(
      padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 4.0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                name,
                style: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.black.withOpacity(0.6)),
              ),
              Text(
                value,
                style: TextStyle(
                  color: valueBlue,
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold,
                ),
              )
            ],
          ),
          SizedBox(
            height: 4.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                date,
                style: TextStyle(color: Colors.grey),
              ),
              Text(
                bank,
                style: TextStyle(color: Colors.grey),
              )
            ],
          ),
          SizedBox(
            height: 4.0,
          ),
          Divider()
        ],
      ));
}

class ItemCard extends StatelessWidget {
  ItemCard(this.titel, this.subtitle, this.value, this.colors);
  final titel;
  final subtitle;
  final value;
  final colors;
  @override
  build(context) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        child: Container(
          padding: EdgeInsets.all(16.0),
          width: double.infinity,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.topRight,
                  colors: colors),
              borderRadius: BorderRadius.circular(4.0)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    titel,
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0),
                  ),
                  Text(
                    subtitle,
                    style: TextStyle(color: Colors.white),
                  )
                ],
              ),
              Text(
                value,
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0),
              )
            ],
          ),
        ),
      );
}
